<!DOCTYPE html>
<html class="iframe-h">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />
	</head>

	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
                            </div>
                            <div class="layui-inline">
								<select name="title" id="title" lay-filter="title">
                                    <option value="">数据标题</option>
                                    {% for i in titleList%}
                                    <option {%if args.title == i%} selected {% endif %} value="{{i}}">{{i}}</option>
                                    {% endfor %}
								</select>
                            </div>
                            <div class="layui-inline">
								<select name="area" id="area" lay-filter="area">
                                    <option value="">地区</option>
                                    {% for i in sheetList%}
                                    <option {%if args.name == i%} selected {% endif %} value="{{i}}">{{i}}</option>
                                    {% endfor %}
								</select>
                            </div>
                            <div class="layui-inline">
								<!-- <select name="states" lay-filter="types">
									<option value="">时间</option>
                                    <option {% if args.month == 0 %} selected {%endif%} value="0">所有</option>
                                    {% for i in monthList %}
                                    <option {% if args.month == i %} selected {%endif%}value="{{i}}">{{i}}月</option>
                                    {% endfor %}
								</select> -->
                                时间:
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="year1" placeholder="" value="{{date.year1}}" autocomplete="off" class="layui-input">
                                </div>
                                年
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="month1" placeholder="" value="{{date.month1}}"  autocomplete="off" class="layui-input">
                                </div>
                                月
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="day1" placeholder="" value="{{date.day1}}"  autocomplete="off" class="layui-input">
                                </div>
                                日------
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="year2" placeholder="" value="{{date.year2}}"  autocomplete="off" class="layui-input">
                                </div>
                                年
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="month2" placeholder="" value="{{date.month2}}"  autocomplete="off" class="layui-input">
                                </div>
                                月
                                <div class="layui-inline">
                                    <input style="width: 50px;" type="text" name="day2" placeholder="" value="{{date.day2}}"  autocomplete="off" class="layui-input">
                                </div>
                                日
                                <button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
                            </div>
                            <div class="layui-inline tool-btn">
                                <!-- <a href="/data_list_charts/{{args.title}}/{{args.name}}/{{args.month}}/PM25" class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="article-add.html"><i class="iconfont">查看图表</i></a> -->
                            </div>
						</div>
					</form>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-even lay-skin="nob">
							<colgroup>
								<col>
								<col>
								<col>
								<col>
								<col>
								<col>
								<col>
								<col>
							</colgroup>
							<thead>
								<tr>
									<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
									<th>时间</th>
                                    <th>地区</th>
                                    <th>AQI值</th>
									<th>PM2.5 μg/m3</th>
									<th>SO2 μg/m3</th>
									<th>NO μg/m3</th>
									<th>NO2 μg/m3</th>
									<th>NOx μg/m3</th>
									<th>O3 μg/m3</th>
									<th>CO μg/m3</th>
									<th>PM10 μg/m3</th>
								</tr>
							</thead>
							<tbody>
                                {% for i in data%}
									<tr>
                                        <td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
										<td>{{i.time}}</td>
                                        <td>{{args.name}}</td>
                                        <td>{{i.aqi}}</td>
										<td>{{i.pm25}}</td>
										<td>{{i.so2}}</td>
										<td>{{i.no}}</td>
										<td>{{i.no2}}</td>
										<td>{{i.nox}}</td>
										<td>{{i.o3}}</td>
										<td>{{i.co}}</td>
										<td>{{i.pm10}}</td>
									</tr>
                                {% endfor %}
							</tbody>
						</table>
						<div class="page-wrap">
							<ul class="pagination">
                                {% if args.page > 1%}
                                <li class="" style="width: 70px;"><span><a href="/data_hours/{{args.title}}/{{args.name}}/{{args.month}}/{{args.page-1}}">上一页</a></span></li>
                                {% endif %}
                                {% for i in range(0,args.totalpage)%}
                                    {% if i >= args.page-6 and i <= args.page+4 %}
                                    <li class="{% if args.page == (i+1)%}active{% endif %}"><span><a href="/data_hours/{{args.title}}/{{args.name}}/{{args.month}}/{{i+1}}">{{i+1}}</a></span></li>
                                    {% endif %}
								{% endfor %}
                                {%if args.page < args.totalpage%}
                                <li class="" style="width: 70px;"><span><a href="/data_hours/{{args.title}}/{{args.name}}/{{args.month}}/{{args.page+1}}">下一页</a></span></li>
                                {%endif%}
							</ul>
						</div>
                    </div>
					<a id="data_explode" url="/data_explode_hours/{{args.title}}/{{args.name}}/{{args.month}}" href="javascript:;" class="layui-btn layui-btn-primary">导出数据</a>
					<a href="/data" class="layui-btn layui-btn-primary">返回</a>
				</div>
		</div>
		<script src="/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script> -->
		<script>
			layui.use(['jquery','layer','form'], function() {
				var $ = layui.jquery,
				layer = layui.layer,
                form = layui.form();
                // var name="{{args.name}}",types=0;
                // form.on('select(area)',function(data){
                //     name = data.value;
                //     location.href = "/data_list/{{args.title}}/"+name+"/"+types
                // })
                // form.on('select(types)',function(data){
                //     types = data.value;
                //     location.href = "/data_list/{{args.title}}/"+name+"/"+types
                // })
                $('#search').on('click',function(){
                    var area = $('#area').val()
                    var title = $('#title').val()
                    var year1 = $('input[name="year1"]').val()
                    var year2 = $('input[name="year2"]').val()
                    var month1 = $('input[name="month1"]').val()
                    var month2 = $('input[name="month2"]').val()
                    var day1 = $('input[name="day1"]').val()
                    var day2 = $('input[name="day2"]').val()
                    if(month1 && month2){
                        if(parseInt(month1) < 10){
                            month1 = '0'+parseInt(month1)
                        }
                        if(parseInt(month2) < 10){
                            month2 = '0'+parseInt(month2)
                        }
                        if(parseInt(day1) < 10){
                            day1 = '0'+parseInt(day1)
                        }
                        if(parseInt(day2) < 10){
                            day2 = '0'+parseInt(day2)
                        }
                        if(!day1 || !day2){
                            alert('请输入具体日期');
                            return;
                        }
                        time = year1+'-'+month1+'-'+day1+'_'+year2+'-'+month2+'-'+day2
                    }else{
                        time = 0
                    }
                    url = "/data_hours/"+title+"/"+area+'/'+time+'/1';
                    // console.log(url)
                    location.href = url
                })
                $('#data_explode').on('click',function(){
                    var url = $(this).attr('url');
                    $.post(url,function(res){
                        location.href = '/get_attachment/'+res.url
                    },'json')
                })
			})
		</script>
	</body>

</html>